<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>网赢集团</title>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
    <link rel="stylesheet" href="css/default.css" />
    <link rel="stylesheet" type="text/css" href="css/shopping.css"/>
</head>
<body>
	<div class="mui-content">
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">购物车</h1>
		</header>
		
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media BoxItem" data-index="1">
					<div class='mui-slider-handle'>
						<div class="BoxItemBottom">
							<div class="BoxItemBottomLeft">
								<a class="chks mui-icon mui-icon-checkmarkempty"></a>
							</div>
							<div class="BoxItemBottomRight">
								<img class="BoxItemBottomRightImg" src="img/headimgeg.jpg" />
								<div class="BoxItemBottomRightDetails">
									<div class="BoxItemBottomRightDetailsName mui-ellipsis-2"><div class="order-title">培训教育系统</div><div class="order-d">套餐：包年套餐</div></div>
									<div class="BoxItemBottomRightDetailsPrice">
										<div class="mui-numbox" data-numbox-max='9'>
											<button class="mui-btn mui-btn-numbox-minus btn_jian" type="button">-</button>
											<input id="test" class="mui-input-numbox" type="number" value="1" />
											<button class="mui-btn mui-btn-numbox-plus btn_add" type="button">+</button>
										</div>
									</div>
								</div>
							</div>
							<div class="BoxItemBottomLeft2">
								<a class="BoxItemBottomRightDetailsMoney">￥600.00</a>
								<span class="price">￥12899</span>
								<div class="mui-icon iconfont icon-shanchu delete"></div>
							</div>
						</div>
					</div>
				</li>
								<li class="mui-table-view-cell mui-media BoxItem" data-index="1">
					<div class='mui-slider-handle'>
						<div class="BoxItemBottom">
							<div class="BoxItemBottomLeft">
								<a class="chks mui-icon mui-icon-checkmarkempty"></a>
							</div>
							<div class="BoxItemBottomRight">
								<img class="BoxItemBottomRightImg" src="img/headimgeg.jpg" />
								<div class="BoxItemBottomRightDetails">
									<div class="BoxItemBottomRightDetailsName mui-ellipsis-2"><div class="order-title">培训教育系统</div><div class="order-d">套餐：包年套餐</div></div>
									<div class="BoxItemBottomRightDetailsPrice">
										<div class="mui-numbox" data-numbox-max='9'>
											<button class="mui-btn mui-btn-numbox-minus btn_jian" type="button">-</button>
											<input id="test" class="mui-input-numbox" type="number" value="1" />
											<button class="mui-btn mui-btn-numbox-plus btn_add" type="button">+</button>
										</div>
									</div>
								</div>
							</div>
							<div class="BoxItemBottomLeft2">
								<a class="BoxItemBottomRightDetailsMoney">￥600.00</a>
								<span class="price">￥12899</span>
								<div class="mui-icon iconfont icon-shanchu delete"></div>
							</div>
						</div>
					</div>
				</li>
								<li class="mui-table-view-cell mui-media BoxItem" data-index="1">
					<div class='mui-slider-handle'>
						<div class="BoxItemBottom">
							<div class="BoxItemBottomLeft">
								<a class="chks mui-icon mui-icon-checkmarkempty"></a>
							</div>
							<div class="BoxItemBottomRight">
								<img class="BoxItemBottomRightImg" src="img/headimgeg.jpg" />
								<div class="BoxItemBottomRightDetails">
									<div class="BoxItemBottomRightDetailsName mui-ellipsis-2"><div class="order-title">培训教育系统</div><div class="order-d">套餐：包年套餐</div></div>
									<div class="BoxItemBottomRightDetailsPrice">
										<div class="mui-numbox" data-numbox-max='9'>
											<button class="mui-btn mui-btn-numbox-minus btn_jian" type="button">-</button>
											<input id="test" class="mui-input-numbox" type="number" value="1" />
											<button class="mui-btn mui-btn-numbox-plus btn_add" type="button">+</button>
										</div>
									</div>
								</div>
							</div>
							<div class="BoxItemBottomLeft2">
								<a class="BoxItemBottomRightDetailsMoney">￥600.00</a>
								<span class="price">￥12899</span>
								<div class="mui-icon iconfont icon-shanchu delete"></div>
							</div>
						</div>
					</div>
				</li>
								<li class="mui-table-view-cell mui-media BoxItem" data-index="1">
					<div class='mui-slider-handle'>
						<div class="BoxItemBottom">
							<div class="BoxItemBottomLeft">
								<a class="chks mui-icon mui-icon-checkmarkempty"></a>
							</div>
							<div class="BoxItemBottomRight">
								<img class="BoxItemBottomRightImg" src="img/headimgeg.jpg" />
								<div class="BoxItemBottomRightDetails">
									<div class="BoxItemBottomRightDetailsName mui-ellipsis-2"><div class="order-title">培训教育系统</div><div class="order-d">套餐：包年套餐</div></div>
									<div class="BoxItemBottomRightDetailsPrice">
										<div class="mui-numbox" data-numbox-max='9'>
											<button class="mui-btn mui-btn-numbox-minus btn_jian" type="button">-</button>
											<input id="test" class="mui-input-numbox" type="number" value="1" />
											<button class="mui-btn mui-btn-numbox-plus btn_add" type="button">+</button>
										</div>
									</div>
								</div>
							</div>
							<div class="BoxItemBottomLeft2">
								<a class="BoxItemBottomRightDetailsMoney">￥600.00</a>
								<span class="price">￥12899</span>
								<div class="mui-icon iconfont icon-shanchu delete"></div>
							</div>
						</div>
					</div>
				</li>
								<li class="mui-table-view-cell mui-media BoxItem" data-index="1">
					<div class='mui-slider-handle'>
						<div class="BoxItemBottom">
							<div class="BoxItemBottomLeft">
								<a class="chks mui-icon mui-icon-checkmarkempty"></a>
							</div>
							<div class="BoxItemBottomRight">
								<img class="BoxItemBottomRightImg" src="img/headimgeg.jpg" />
								<div class="BoxItemBottomRightDetails">
									<div class="BoxItemBottomRightDetailsName mui-ellipsis-2"><div class="order-title">培训教育系统</div><div class="order-d">套餐：包年套餐</div></div>
									<div class="BoxItemBottomRightDetailsPrice">
										<div class="mui-numbox" data-numbox-max='9'>
											<button class="mui-btn mui-btn-numbox-minus btn_jian" type="button">-</button>
											<input id="test" class="mui-input-numbox" type="number" value="1" />
											<button class="mui-btn mui-btn-numbox-plus btn_add" type="button">+</button>
										</div>
									</div>
								</div>
							</div>
							<div class="BoxItemBottomLeft2">
								<a class="BoxItemBottomRightDetailsMoney">￥600.00</a>
								<span class="price">￥12899</span>
								<div class="mui-icon iconfont icon-shanchu delete"></div>
							</div>
						</div>
					</div>
				</li>
								<li class="mui-table-view-cell mui-media BoxItem" data-index="1">
					<div class='mui-slider-handle'>
						<div class="BoxItemBottom">
							<div class="BoxItemBottomLeft">
								<a class="chks mui-icon mui-icon-checkmarkempty"></a>
							</div>
							<div class="BoxItemBottomRight">
								<img class="BoxItemBottomRightImg" src="img/headimgeg.jpg" />
								<div class="BoxItemBottomRightDetails">
									<div class="BoxItemBottomRightDetailsName mui-ellipsis-2"><div class="order-title">培训教育系统</div><div class="order-d">套餐：包年套餐</div></div>
									<div class="BoxItemBottomRightDetailsPrice">
										<div class="mui-numbox" data-numbox-max='9'>
											<button class="mui-btn mui-btn-numbox-minus btn_jian" type="button">-</button>
											<input id="test" class="mui-input-numbox" type="number" value="1" />
											<button class="mui-btn mui-btn-numbox-plus btn_add" type="button">+</button>
										</div>
									</div>
								</div>
							</div>
							<div class="BoxItemBottomLeft2">
								<a class="BoxItemBottomRightDetailsMoney">￥600.00</a>
								<span class="price">￥12899</span>
								<div class="mui-icon iconfont icon-shanchu delete"></div>
							</div>
						</div>
					</div>
				</li>
								<li class="mui-table-view-cell mui-media BoxItem" data-index="1">
					<div class='mui-slider-handle'>
						<div class="BoxItemBottom">
							<div class="BoxItemBottomLeft">
								<a class="chks mui-icon mui-icon-checkmarkempty"></a>
							</div>
							<div class="BoxItemBottomRight">
								<img class="BoxItemBottomRightImg" src="img/headimgeg.jpg" />
								<div class="BoxItemBottomRightDetails">
									<div class="BoxItemBottomRightDetailsName mui-ellipsis-2"><div class="order-title">培训教育系统</div><div class="order-d">套餐：包年套餐</div></div>
									<div class="BoxItemBottomRightDetailsPrice">
										<div class="mui-numbox" data-numbox-max='9'>
											<button class="mui-btn mui-btn-numbox-minus btn_jian" type="button">-</button>
											<input id="test" class="mui-input-numbox" type="number" value="1" />
											<button class="mui-btn mui-btn-numbox-plus btn_add" type="button">+</button>
										</div>
									</div>
								</div>
							</div>
							<div class="BoxItemBottomLeft2">
								<a class="BoxItemBottomRightDetailsMoney">￥600.00</a>
								<span class="price">￥12899</span>
								<div class="mui-icon iconfont icon-shanchu delete"></div>
							</div>
						</div>
					</div>
				</li>
								<li class="mui-table-view-cell mui-media BoxItem" data-index="1">
					<div class='mui-slider-handle'>
						<div class="BoxItemBottom">
							<div class="BoxItemBottomLeft">
								<a class="chks mui-icon mui-icon-checkmarkempty"></a>
							</div>
							<div class="BoxItemBottomRight">
								<img class="BoxItemBottomRightImg" src="img/headimgeg.jpg" />
								<div class="BoxItemBottomRightDetails">
									<div class="BoxItemBottomRightDetailsName mui-ellipsis-2"><div class="order-title">培训教育系统</div><div class="order-d">套餐：包年套餐</div></div>
									<div class="BoxItemBottomRightDetailsPrice">
										<div class="mui-numbox" data-numbox-max='9'>
											<button class="mui-btn mui-btn-numbox-minus btn_jian" type="button">-</button>
											<input id="test" class="mui-input-numbox" type="number" value="1" />
											<button class="mui-btn mui-btn-numbox-plus btn_add" type="button">+</button>
										</div>
									</div>
								</div>
							</div>
							<div class="BoxItemBottomLeft2">
								<a class="BoxItemBottomRightDetailsMoney">￥600.00</a>
								<span class="price">￥12899</span>
								<div class="mui-icon iconfont icon-shanchu delete"></div>
							</div>
						</div>
					</div>
				</li>
			</ul>
			<div style="height: 70px;"></div>
		</div>
		<div class="footer">
			<div class="footer-left">
				<div class="chkAll">
					<a class="footer-left1 mui-icon mui-icon-checkmarkempty "></a>
					<a class="footer-left2">全选</a>
				</div>
			</div>
			<div class="footer-center">
				<div class="footer-center-top">
					<a class="footer-center-top-left">合计:</a>
					<a class="footer-center-top-right">￥0</a>
				</div>
				<div class="footer-center-bottom">不含运费</div>
			</div>
			<div id="gotoCalc" class="footer-right">去结算
				<a class="count">&nbsp;(0)</a>
			</div>
		</div>

	</div>
	
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item" id="index">
			<span class="mui-icon iconfont icon-shouye1"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item" id="classify">
			<span class="mui-icon iconfont icon-fenlei"></span>
			<span class="mui-tab-label">分类</span>
		</a>
		<a class="mui-tab-item mui-active" id="shopping">
			<span class="mui-icon iconfont icon-gouwuche"></span>
			<span class="mui-tab-label">购物车</span>
		</a>
		<a class="mui-tab-item" id="mine">
			<span class="mui-icon iconfont icon-wode"></span>
			<span class="mui-tab-label">我的</span>
		</a>
	</nav>
	<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var t = Math.random();
		$('#index').on('tap', function() {
			window.location.href = "index.html?t=" + t;
		});
		$('#classify').on('tap', function() {
			window.location.href = "classify.html?t=" + t;
		});
		$('#shopping').on('tap', function() {
			window.location.href = "shopping.html?t=" + t;
		});
		$('#mine').on('tap', function() {
			window.location.href = "mine.html?t=" + t;
		});
		
		
		
		//删除 此处伪删 
		var btnArray = ['确认', '取消'];
		$('.BoxItem').on('tap', '.delete', function(event) {
//			console.log('1111',this);
			var dom = $(this).parents()[1];
			var index = $($(this).parents()[1]).attr("data-index")
			mui.confirm('确认取消删除此商品？', '提示', btnArray, function(e) {
				if(e.index == 0) {
					delShop(dom, index);
				}
			});
//			return false; 
		});
		//去结算
		document.getElementById("gotoCalc").addEventListener("tap", function() {
			if($(".footer-center-top-right").html().split("￥")[1] == 0) {
				mui.toast("还未选择商品哦~");
				return
			}
			mui.openWindow({
				url: "index.html",
				id: "PlaceOrder.html"
			})
		})
		//删除商品
		function delShop(dom, index) {
			if(dom) {
				dom.parentNode.removeChild(dom);
				var isMore = false;
				mui("li").each(function() {
					if($(this).attr("data-index") == index) {
						isMore = true;
					}
				})
				//如果该商铺没有更多商品，则删除商铺名称
				if(!isMore) {
					mui(".ShopAll").each(function() {
						if($(this).attr("data-index") == index) {
							this.parentNode.removeChild(this);
						}
					})
				}
			}
			CalcMoney();
		}
		//购买数量减1
		mui(".BoxItemBottomRightDetailsPrice").on("tap", ".btn_jian", function() {
			if($(this).next()[0].value <= 1) {
				mui.toast("不能再减少啦~");
				$(this).next()[0].value = 1;
			} else {
				$(this).next()[0].value = parseInt($(this).next()[0].value);
			}
			CalcMoney();
		})
		//购买数量加1
		mui(".BoxItemBottomRightDetailsPrice").on("tap", ".btn_add", function() {
			$(this).prev()[0].value = parseInt($(this).prev()[0].value);
			CalcMoney();
		})
		var guigeDom = null;
		//全选
		mui(".footer").on("tap", ".chkAll", function() {
			if(mui(this)[0].children[0].classList.contains("selectAll")) {
				$(mui(this)[0].children[0]).removeClass("selectAll");
				$(".chk").removeClass("selectPrice");
				$(".chks").removeClass("selectPrice");
			} else {
				$(mui(this)[0].children[0]).addClass("selectAll");
				$(".chk").addClass("selectPrice");
				$(".chks").addClass("selectPrice");
			}
			CalcMoney();
		})
		//选中/取消商品
		mui(".BoxItemBottom").on("tap", ".chks", function() {
			var index = $($(this).parents("li")[0]).attr("data-index");
			if($(this)[0].classList.contains("selectPrice")) {
				$(this).removeClass("selectPrice");
				//取消选择商品的时候取消全选
				mui(".ShopAll").each(function() {
					if($(this).attr("data-index") == index) {
						$($(this)[0].children[0]).removeClass("selectPrice")
					}
				})
				$(".footer-left1").removeClass("selectAll")
			} else {
				$(this).addClass("selectPrice");
//				if(isShopAll(index)) {
//					mui(".ShopAll").each(function() {
//						if($(this).attr("data-index") == index) {
//							$($(this)[0].children[0]).addClass("selectPrice")
//						}
//					})
//				}
				if(isAll()) {
					$(".footer-left1").addClass("selectAll")
				}
			}
			CalcMoney();
		})
		//判断是否全选
		function isAll() {
			var result = true;
			mui(".chk").each(function() {
				if(!$(this)[0].classList.contains("selectPrice")) {
					result = false;
					return result;
				}
			})
			mui(".chks").each(function() {
				if(!$(this)[0].classList.contains("selectPrice")) {
					result = false;
					return result;
				}
			})
			return result;
		}
		//判断商铺里面所有商品是否选中
		function isShopAll(index) {
			var result = true;
			mui("li").each(function(i, e) {
				if($(this).attr("data-index") == index) {
					if(!$(this)[0].children[0].children[0].children[0].children[0].classList.contains("selectPrice")) {
						result = false;
						return result;
					}
				}
			})
			return result;
		}
		//选中/取消
		function selectShop(isSelect, index) {
			mui("li").each(function(i, e) {
				if($(this).attr("data-index") == index) {
					if(isSelect) {
						if(!$(this)[0].children[1].children[0].children[0].children[0].classList.contains("selectPrice")) {
							$($(this)[0].children[1].children[0].children[0].children[0]).addClass("selectPrice");
						}
						//如果所有复选框全部选中则选中全选
						if(isAll()) {
							$(".footer-left1").addClass("selectAll");
						}
					} else {
						if($(this)[0].children[1].children[0].children[0].children[0].classList.contains("selectPrice")) {
							$($(this)[0].children[1].children[0].children[0].children[0]).removeClass("selectPrice");
						}
						//无论什么只要取消选择则 取消全选
						$(".footer-left1").removeClass("selectAll");
					}
				}
			})
			CalcMoney();
		}
		//计算总价及总个数
		function CalcMoney() {
			var count = 0;
			var money = 0;
			mui(".chks").each(function() {
				if($(this)[0].classList.contains("selectPrice")) {
					count++;
//						console.log('11111',$(this).parents().siblings('.BoxItemBottomLeft')[0].children[0].innerHTML.split("￥")[1]);
					var price = $(this).parents().siblings('.BoxItemBottomLeft2')[0].children[0].innerHTML.split("￥")[1];
					var num = $(this).parents().next()[0].children[1].children[1].children[0].children[1].value;
					money += parseFloat(price) * num;
				}

				//去结算个数
				$(".count").html("&nbsp(" + count + ")");
				//合计
				$(".footer-center-top-right").html("￥" + money)
			})
		}
	</script>

</body>
</html>